/* ========================================================= 
   BLOG (ModBlogC) — One-Row Cards, Forum Dark, FULL-WIDTH (NO FIXED THUMB)
   - Full-width list (no max-width constraints)
   - Single-column list; each item = [ intrinsic thumb | flexible text ]
   - Clean separators, cyan titles (24px Ubuntu to match forum)
   - Lazy image blur-up + CLS-safe dimensions
   - TEXT COLUMN STRETCHES to the pane edge (no content cap)
   - Trimmed SINGLE-POST hero height (cropped, not squished)
   - Minimal, clean hover (title + separator only)
   ========================================================= */

/* Load Ubuntu font */
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700;800&display=swap");

.ModBlogC {
  /* Typography + colors */
  --ink: #e8edf4;
  --muted: #9eb1c7;
  --cyan: #00BFFF;

  /* Inset separator */
  --inset: 0;
  --line-rgb: 255, 255, 255;
  --line-h: 2px;
  --line-h-hover: 3px;

  /* Layout tokens */
  --gap: 22px;
  --gutter: 24px;
  --content-max: none;
}

/* Base / neutralize cards */
.ModBlogC .bbs-article,
.ModBlogC .bbs-listarticle,
.ModBlogC .bbs-comments,
.ModBlogC .bbs-article .content,
.ModBlogC .bbs-listarticle .content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   LIST VIEW — OUTER WRAPPER = FULL WIDTH, SINGLE COLUMN
   ========================================================= */
.ModBlogC .bbs-list,
.ModBlogC .bbs-list-wrap,
.ModBlogC .bbs-listing,
.ModBlogC .blog-main-content {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* If pager lives inside the wrapper, make it span full width */
.ModBlogC .blog-main-content .bbs-pager,
.ModBlogC .bbs-list .bbs-pager {
  grid-column: 1 / -1;
}

/* Kill legacy floats/widths on items */
.ModBlogC .bbs-list > .bbs-listarticle,
.ModBlogC .bbs-list-wrap > .bbs-listarticle,
.ModBlogC .bbs-listing > .bbs-listarticle {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

/* =========================================================
   LIST ITEM — ONE ROW: [intrinsic thumb | text]
   ========================================================= */
.ModBlogC .bbs-listarticle {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(220px, 34%) 1fr;
  align-items: center;
  column-gap: var(--gap);
  padding: 18px 18px 22px;
  overflow: visible;
}

/* Thumbnail */
.ModBlogC .bbs-listarticle > a,
.ModBlogC .bbs-listarticle > .thumb {
  grid-column: 1;
  grid-row: 1 / span 3;
  display: block;
  max-width: 560px;
}
.ModBlogC .bbs-listarticle figure {
  margin: 0;
  line-height: 0;
}
.ModBlogC .bbs-listarticle figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #22314c;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}
.ModBlogC .bbs-listarticle a figure:empty {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
}

/* All text in column 2 */
.ModBlogC .bbs-listarticle > .supertitle,
.ModBlogC .bbs-listarticle > h2,
.ModBlogC .bbs-listarticle > .content {
  grid-column: 2;
}

/* Text width handling */
.ModBlogC .bbs-listarticle > h2,
.ModBlogC .bbs-listarticle > .supertitle,
.ModBlogC .bbs-listarticle .content,
.ModBlogC .bbs-listarticle .content > *,
.ModBlogC .bbs-listarticle .content .summary,
.ModBlogC .bbs-listarticle .content .metadata {
  max-width: none !important;
  width: 100% !important;
}

/* =========================================================
   TITLES — Match Forum Font (MSP Insights Style)
   ========================================================= */
.ModBlogC .bbs-listarticle > .supertitle {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 4px;
}
.ModBlogC .bbs-listarticle > h2 {
  margin: 0.1em 0 0.35em;
  line-height: 1.2;
}

/* Strong selector to override ModBlog default */
.ModBlogC .bbs-listarticle h2 a,
.ModBlogC .bbs-listarticle h2 a:link,
.ModBlogC .bbs-listarticle h2 a:visited {
  font-family: 'Ubuntu', Helvetica, sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #00BFFF !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.ModBlogC .bbs-listarticle h2 a:hover,
.ModBlogC .bbs-listarticle h2 a:focus-visible {
  color: #00BFFF !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* Summary + content */
.ModBlogC .bbs-listarticle .content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ModBlogC .bbs-listarticle .content .summary,
.ModBlogC .bbs-listarticle .content .summary p {
  font-size: 1.22rem !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  margin: 6px 0 6px;
  color: var(--ink);
}

/* Metadata */
.ModBlogC .bbs-listarticle .content .metadata {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  line-height: 1.3;
  margin-top: 4px;
  color: var(--muted) !important;
  font-size: 0.95rem;
}
.ModBlogC .bbs-listarticle .content .metadata > div {
  display: flex;
  align-items: center;
  gap: 6px;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
  padding-right: 10px;
  margin-right: 6px;
}
.ModBlogC .bbs-listarticle .content .metadata > div:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}
.ModBlogC .bbs-listarticle .content .metadata i {
  opacity: 0.9;
}

/* Separator */
.ModBlogC .bbs-listarticle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--line-h);
  background: linear-gradient(
    90deg,
    rgba(var(--line-rgb), 0) 0%,
    rgba(var(--line-rgb), 0.45) 16%,
    rgba(var(--line-rgb), 0.85) 50%,
    rgba(var(--line-rgb), 0.45) 84%,
    rgba(var(--line-rgb), 0) 100%
  );
  margin: 0 var(--inset);
  pointer-events: none;
  transition: height 0.12s ease;
}
.ModBlogC .bbs-listarticle:hover::after {
  height: var(--line-h-hover);
}

/* =========================================================
   SINGLE ARTICLE VIEW — GRID ALIGNMENT + HERO
   ========================================================= */
.ModBlogC .bbs-article .content {
  clear: none !important;
  overflow: visible !important;
  display: grid !important;
  grid-template-columns: 240px minmax(0, 1fr);
  column-gap: 32px;
  align-items: start;
}
.ModBlogC .bbs-article .content .metadata {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}
.ModBlogC .bbs-article .content .body {
  grid-column: 2;
  width: auto !important;
  overflow: visible !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  min-width: 0;
  font-size: 1.22rem !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  letter-spacing: 0.2px;
  color: var(--ink);
}
.ModBlogC .bbs-article .content .body > :first-child {
  margin-top: 0 !important;
}

/* Single-post headings match forum */
.ModBlogC .bbs-article .content .body h1,
.ModBlogC .bbs-article .content .body h2,
.ModBlogC .bbs-article .content .body h3 {
  font-family: 'Ubuntu', Helvetica, Arial, sans-serif !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: #00BFFF !important;
}
.ModBlogC .bbs-article .content .body a,
.ModBlogC .bbs-listarticle .content .summary a {
  color: #9ad9ff !important;
  text-decoration: none;
}
.ModBlogC .bbs-article .content .body a:hover,
.ModBlogC .bbs-listarticle .content .summary a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =========================================================
   COMMENTS
   ========================================================= */
.ModBlogC .bbs-comments {
  position: relative;
  margin-top: 30px;
  padding-top: 10px;
}
.ModBlogC .bbs-comments::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--line-h);
  background: linear-gradient(
    90deg,
    rgba(var(--line-rgb), 0) 0%,
    rgba(var(--line-rgb), 0.45) 16%,
    rgba(var(--line-rgb), 0.85) 50%,
    rgba(var(--line-rgb), 0.45) 84%,
    rgba(var(--line-rgb), 0) 100%
  );
  margin: 0 var(--inset);
}
.ModBlogC .bbs-comments .comment .author .profile,
.ModBlogC .bbs-comments .totals,
.ModBlogC .bbs-comments .comment .actions {
  color: var(--muted) !important;
  font-size: 0.95rem;
}

/* =========================================================
   PAGINATION
   ========================================================= */
.ModBlogC .bbs-pager .bbs-pagination a {
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
}
.ModBlogC .bbs-pager .bbs-pagination .no-touch a:hover {
  background: rgba(255, 255, 255, 0.07);
}
.ModBlogC .bbs-pager .bbs-pagination .current {
  background: #777;
  border-color: #777;
  color: #fff;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .ModBlogC .bbs-article .content {
    display: block !important;
  }
  .ModBlogC .bbs-article .content .body {
    margin-top: 12px !important;
  }
}
@media (max-width: 720px) {
  .ModBlogC .bbs-listarticle {
    grid-template-columns: 1fr;
  }
  .ModBlogC .bbs-listarticle > a {
    grid-row: auto;
    order: -1;
    margin-bottom: 10px;
  }
}

/* =========================================================
   SHARED BLUR-UP
   ========================================================= */
.blur-up {
  filter: blur(12px);
  opacity: 0.6;
  transform: translateZ(0);
  transition: filter 0.35s, opacity 0.35s;
}
.blur-up.is-loaded {
  filter: blur(0);
  opacity: 1;
}

/* ====== Remove global h2 margin from portal.css ====== */
html body h2 {
  margin: 0 !important;
}
/* =========================================================
   SINGLE-POST HERO TITLE — Match Forum Title Style
   ========================================================= */
.ModBlogC h1[id^="post-title"],
.ModBlogC .bbs-article h1[id^="post-title"] {
  font-family: 'Ubuntu', Helvetica, sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #00BFFF !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
  margin: 0 0 12px !important;
  text-shadow: none !important; /* remove any theme shadows */
}
/* =========================================================
   SHARE HEADING + DATE — Match Forum Blue
   ========================================================= */
.ModBlogC h5,
.ModBlogC h5 a {
  font-family: 'Ubuntu', Helvetica, sans-serif !important;
  font-size: 1.5REM !important;
  font-weight: 800 !important;
  color: #00BFFF !important;
  margin: 0 0 12px !important;
  text-transform: none !important;
  text-decoration: none !important;
}

/* Date and moment tabs */
.ModBlogC .momentabs,
.ModBlogC span.momentabs {
  font-family: 'Ubuntu', Helvetica, sans-serif !important;
  font-size: 16px !important;
  color: #00BFFF !important;
  font-weight: 400 !important;
}